var that;

//所有的this都是实例化对象
class Tab {
  constructor(id) {
    // that = this;
    // 获取元素
    this.main = document.querySelector(id);
    this.add = this.main.querySelector(".tabadd");
    this.ul = this.main.querySelector(".fisrstnav ul");
    this.fsection = this.main.querySelector(".tabscon");
    this.init();
  }
  //   初始化给相关元素添加事件
  init() {
    this.updateNode();
    this.add.onclick = this.addTab;
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab.bind(this,this.lis[i])
    }
  }
  //   获取所有的小Li和section
  updateNode() {
    this.lis = this.main.querySelectorAll("li");
    this.sections = this.main.querySelectorAll("section");
  }
  // 1、切换功能
  toggleTab(that) {
    this.clearclass();
    that.className = "liactive";
    this.sections[this.index].className = "conactive";
  }
  //   1-1、清除
  clearclass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }
  // 2、添加功能
  addTab() {
    that.clearclass();
    //   2-1、创建元素
    var random = Math.random();
    var li = ` <li class="liactive">
    <span>新选项卡</span><span class="iconfont icon-guanbi"></span>
  </li>`;
    var section = `<section class="conactive">${random}</section>`;
    // 2-2、把元素加到ul里面去
    that.ul.insertAdjacentHTML("beforeend", li);
    that.fsection.insertAdjacentHTML("beforeend", section);
    that.init();
  }
  //   3、删除功能
  removeTab() {}
  // 4、编辑功能
  editTab() {}
}

new Tab("#tab");
